import React, { useState, useEffect } from 'react';
import { Card, Progress, Row, Col, Tag, message, Spin } from 'antd';
// import { history } from 'umi'
import moment from 'moment/moment';
// import pageTabUtil from '@/utils/pageTabUtil';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { TaskDetailBox } from '../../components';
import DetailInfo from '../MyTaskDetail/components/DetailInfo/DetailInfo';

import { getChangeRecDetail } from '../../services';
import {
    TimeFormat,
    TimeFormatHour,
    delayTimeFormat,
    getTaskDuration,
    getTaskStatus,
    getTaskPriority,
    getTaskSituation,
    getTaskFlag,
    TaskStatus,
    toNum
} from '../../utils';

import styles from './ChangeRecDetail.less';

const ChangeRecDetail = ({ location }) => {
    const { query: urlQuery } = location;
    const [loading, setLoading] = useState(false);
    const [detailInfo, setDetailInfo] = useState({});
    const [changeMark, setChangeMark] = useState({});
    const detailCardTitle = (
        <span>
            <span>任务详情</span>
            {detailInfo.taskNo ? (
                <Tag color="orange" style={{ marginLeft: '8px' }}>
                    {detailInfo.taskNo}
                </Tag>
            ) : null}
        </span>
    );

    const renderProgress = (taskStatus, taskProgress = '0') => {
        let format = {};
        let colorProgress = '#5AD8A6';
        if (toNum(taskProgress) >= 100) {
            format = {
                format: () => '100%'
            };
        }
        if (taskStatus === TaskStatus.FINISH || taskStatus === TaskStatus.CANCEL) {
            colorProgress = '#999999';
        } else if (taskStatus === TaskStatus.PAUSE) {
            colorProgress = '#FFA784';
        }
        return (
            <Progress
                className={styles.taskProgress}
                percent={Number(taskProgress)}
                strokeColor={colorProgress}
                size="small"
                {...format}
            />
        );
    };
    const fetchDetail = async () => {
        setLoading(true);
        const params = { id: urlQuery.id, operateId: urlQuery.operateId };

        const result = await getChangeRecDetail(params);

        if (result.code === 10000) {
            setDetailInfo(result.data);
            setChangeMark(result.data.changeMark);
        } else {
            message.error(result.msg);
            // pageTabUtil.closeTab();
        }
        setLoading(false);
    };

    useEffect(() => {
        fetchDetail();
    }, []);
    const getList = list => (
        <div>
            {list &&
                list.map((item, index) => {
                    if (index === 0) {
                        return (
                            <div
                                key={item.taskName}
                                title={item.taskName}
                                style={{
                                    // color: '#FFA22D',
                                    wordBreak: 'break-word',
                                    overflow: 'hidden',
                                    whiteSpace: 'nowrap',
                                    textOverflow: 'ellipsis'
                                    // cursor: 'pointer'
                                }}
                                // onClick={() => {
                                //     history.push({
                                //         pathname: '/work/task/taskdetail',
                                //         query: {
                                //             id: item.taskId,
                                //             activeKey: 'detailMsg'
                                //         }
                                //     });
                                // }}
                            >
                                {item.taskName}
                            </div>
                        );
                    }
                    return null;
                })}
        </div>
    );
    const getTime = time => {
        if (time.indexOf('00:00:00') === -1 && time.indexOf('23:59:59') === -1) {
            return moment(time).format('YYYY-MM-DD HH:mm');
        }
        return moment(time).format('YYYY-MM-DD');
    };

    const sbTime = (time, hour = 8) => {
        if (time) {
            return `${TimeFormatHour(time)} ${time ? '(' : ''}${TimeFormat(time, hour)}${time ? ')' : ''}`;
        }
        return '0小时(0天0小时0分钟)';
    };
    const sbTimeTwo = time => {
        if (time) {
            return `${TimeFormatHour(time)} ${time ? '(' : ''}${TimeFormat(time)}${time ? ')' : ''}`;
        }
        return '';
    };
    const taskDetails = [
        // {
        //     key: '关联产品:',
        //     value: (
        //         <a title={detailInfo.relateProductName} style={{ wordBreak: 'break-word' }}>
        //             {detailInfo.relateProductName}
        //         </a>
        //     )
        // },
        // {
        //     key: '关联项目:',
        //     value: (
        //         <a title={detailInfo.relateProjectName} style={{ wordBreak: 'break-word' }}>
        //             {detailInfo.relateProjectName}
        //         </a>
        //     )
        // },
        {
            key: '前置任务:',
            render: (
                <span
                    style={{
                        color: changeMark.frontTask === undefined || changeMark.frontTask === 0 ? '#787878' : 'red'
                    }}
                >
                    前置任务:
                </span>
            ),
            value: getList(detailInfo.frontTaskList)
        },
        {
            key: '一级任务查阅:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.enableChildrenQueryFlag === undefined || changeMark.enableChildrenQueryFlag === 0
                                ? '#787878'
                                : 'red'
                    }}
                >
                    一级任务查阅:
                </span>
            ),
            hide: detailInfo && detailInfo.parentTaskId,
            value: `${
                detailInfo && detailInfo.enableChildrenQueryFlag === 1
                    ? '允许被下级所有子任务查阅'
                    : '不允许被下级所有子任务查阅'
            }`
        },
        {
            key: '上一级任务:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.parentTaskName === undefined || changeMark.parentTaskName === 0
                                ? '#787878'
                                : 'red'
                    }}
                >
                    上一级任务:
                </span>
            ),
            value: (
                <div
                    title={detailInfo.parentTaskName}
                    style={{
                        // color: '#ffa808',
                        // cursor: 'pointer',
                        wordBreak: 'break-word',
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis'
                    }}
                    // onClick={() => {
                    //     history.push({
                    //         pathname: '/work/task/taskdetail',
                    //         query: {
                    //             id: detailInfo.parentTaskId,
                    //             activeKey: 'detailMsg'
                    //         }
                    //     });
                    // }}
                >
                    {detailInfo.parentTaskName}
                </div>
            )
        },
        {
            key: '关联任务:',
            render: (
                <span
                    style={{
                        color: changeMark.relateTask === undefined || changeMark.relateTask === 0 ? '#787878' : 'red'
                    }}
                >
                    关联任务:
                </span>
            ),
            value: getList(detailInfo.relateTaskList)
        },
        {
            key: '任务来源:',
            value: detailInfo.sourceName
        },
        {
            key: '任务状态:',
            value: getTaskStatus(detailInfo.taskStatus)
        },
        {
            key: '优先级:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.taskPriority === undefined || changeMark.taskPriority === 0 ? '#787878' : 'red'
                    }}
                >
                    优先级:
                </span>
            ),
            value: getTaskPriority(detailInfo.taskPriority)
        },
        {
            key: '开始执行情况:',
            value: (
                <span style={{ color: detailInfo.startExecuteSituation === 3 ? '#FF9E00' : '#787878' }}>
                    {getTaskSituation(detailInfo.startExecuteSituation)}
                </span>
            )
        },
        {
            key: '完成执行情况:',
            value: (
                <span style={{ color: detailInfo.endExecuteSituation === 3 ? '#FF9E00' : '#787878' }}>
                    {getTaskSituation(detailInfo.endExecuteSituation)}
                </span>
            )
        },
        {
            key: '当前进度:',
            value: renderProgress(detailInfo.taskStatus, detailInfo.taskProgress)
        },
        {
            key: '被催办次数:',
            value: detailInfo.urgeCount || 0
        },
        {
            key: '发起人:',
            value:
                detailInfo.stepPersonInfo &&
                detailInfo.stepPersonInfo
                    .filter(item => item.stepCode === 1)
                    .map(item => item.employeeName)
                    .join('')
        },
        {
            key: '执行人:',
            render: (
                <span
                    style={{
                        color: changeMark.executor === undefined || changeMark.executor === 0 ? '#787878' : 'red'
                    }}
                >
                    执行人:
                </span>
            ),
            value:
                detailInfo.stepPersonInfo &&
                detailInfo.stepPersonInfo
                    .filter(item => item.stepCode === 3)
                    .map(item => item.employeeName)
                    .join('')
        },
        {
            key: '验收人:',
            render: (
                <span
                    style={{
                        color: changeMark.acceptor === undefined || changeMark.acceptor === 0 ? '#787878' : 'red'
                    }}
                >
                    验收人:
                </span>
            ),
            value:
                detailInfo.stepPersonInfo &&
                detailInfo.stepPersonInfo
                    .filter(item => item.stepCode === 5)
                    .map(item => item.employeeName)
                    .join('')
        },
        {
            key: '审核人:',
            render: (
                <span
                    style={{ color: changeMark.auditor === undefined || changeMark.auditor === 0 ? '#787878' : 'red' }}
                >
                    审核人:
                </span>
            ),
            value:
                detailInfo.stepPersonInfo &&
                detailInfo.stepPersonInfo
                    .filter(item => item.stepCode === 2)
                    .map(item => item.employeeName)
                    .join('')
        },
        {
            key: '参与人:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.participator === undefined || changeMark.participator === 0 ? '#787878' : 'red'
                    }}
                >
                    参与人:
                </span>
            ),
            value:
                detailInfo.stepPersonInfo &&
                detailInfo.stepPersonInfo
                    .filter(item => item.stepCode === 4)
                    .map(item => item.employeeName)
                    .join(' ')
        },
        // {
        //     key: '抄送给:',
        //     value: detailInfo.auditor
        // },
        {
            key: '评分发起人:',
            value: detailInfo.gradeInitiator
        },
        {
            key: '估算发起人:',
            value: detailInfo.estimateInitiator
        }
    ];

    const timeDetails = [
        {
            key: '发起时间:',
            value: detailInfo.launchTime && getTime(detailInfo.launchTime)
        },
        {
            key: '工作量:',
            value: detailInfo.taskWorkPoint
        },
        {
            key: '开始时间:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.planStartTime === undefined || changeMark.planStartTime === 0 ? '#787878' : 'red'
                    }}
                >
                    开始时间:
                </span>
            ),
            value: detailInfo.planStartTime && getTime(detailInfo.planStartTime)
        },
        {
            key: '实际开始时间:',
            value: detailInfo.actualStartTime && getTime(detailInfo.actualStartTime)
        },
        {
            key: '截止时间:',
            render: (
                <span
                    style={{
                        color: changeMark.planEndTime === undefined || changeMark.planEndTime === 0 ? '#787878' : 'red'
                    }}
                >
                    截止时间:
                </span>
            ),
            value: detailInfo.planEndTime && getTime(detailInfo.planEndTime)
        },
        {
            key: '实际完成时间:',
            value: detailInfo.actualEndTime && getTime(detailInfo.actualEndTime)
        },
        {
            key: '逾期时间:',
            value: detailInfo.actualEndTime && detailInfo.planEndTime ? delayTimeFormat(detailInfo.overdueWorkTime) : ''
        },
        {
            key: '预估工时:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.estimateWorkDuration === undefined || changeMark.estimateWorkDuration === 0
                                ? '#787878'
                                : 'red'
                    }}
                >
                    预估工时:
                </span>
            ),
            value: sbTimeTwo(detailInfo.estimateWorkDuration)
        },
        {
            key: '实际工时:',
            value: sbTimeTwo(detailInfo.actualWorkDuration)
        },
        {
            key: '逾期工时:',
            value:
                detailInfo.estimateWorkDuration && detailInfo.actualWorkDuration
                    ? sbTime(detailInfo.overdueWorkDuration, 8)
                    : ''
        }
    ];
    const otherDetails = [
        {
            key: '提前提醒:',
            render: (
                <span
                    style={{
                        color: changeMark.remindType === undefined || changeMark.remindType === 0 ? '#787878' : 'red'
                    }}
                >
                    提前提醒:
                </span>
            ),
            value: detailInfo.remindInfo || ''
        },
        {
            key: '通用类型:',
            render: (
                <span
                    style={{
                        color: changeMark.generalType === undefined || changeMark.generalType === 0 ? '#787878' : 'red'
                    }}
                >
                    通用类型:
                </span>
            ),
            value: getTaskDuration(detailInfo.generalType)
        },
        {
            key: '通知方式:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.taskNoticeWay === undefined || changeMark.taskNoticeWay === 0 ? '#787878' : 'red'
                    }}
                >
                    通知方式:
                </span>
            ),
            value: detailInfo.taskNoticeWay
        },
        {
            key: '是否周期任务:',
            render: (
                <span
                    style={{
                        color:
                            changeMark.cycleTaskFlag === undefined || changeMark.cycleTaskFlag === 0 ? '#787878' : 'red'
                    }}
                >
                    是否周期任务:
                </span>
            ),
            value: detailInfo.cycleTaskInfo || ''
        },
        {
            key: '是否个人隐私:',
            value: getTaskFlag(detailInfo.personalPrivacyFlag)
        }
    ];

    return (
        <PageHeaderWrapper>
            <Spin spinning={loading}>
                <Card
                    bordered={false}
                    title={detailCardTitle}
                    style={{
                        borderRadius: '0',
                        borderBottom: '1px solid #EDEDED',
                        paddingBottom: '10px'
                    }}
                    headStyle={{ borderBottom: 'none' }}
                >
                    <Row span={24} gutter={16}>
                        <Col
                            span={22}
                            className={styles.taskName}
                            style={{
                                color:
                                    changeMark.taskName === undefined || changeMark.taskName === 0 ? '#787878' : 'red'
                            }}
                        >
                            {detailInfo.taskName}
                        </Col>
                    </Row>
                </Card>
                <Row
                    type="flex"
                    span={24}
                    gutter={16}
                    style={{
                        flexWrap: 'nowrap',
                        alignItems: 'stretch',
                        paddingBottom: '27px',
                        background: '#fff',
                        marginLeft: '0',
                        marginRight: '0'
                    }}
                >
                    <Col
                        style={{
                            flex: 1,
                            overflow: 'hidden',
                            paddingRight: '0',
                            paddingLeft: 0,
                            borderRight: '1px solid #EDEDED'
                        }}
                        className={styles.detailCard}
                    >
                        <Card
                            bordered={false}
                            style={{
                                height: '100%',
                                borderBottomRightRadius: '0',
                                borderTopLeftRadius: '0',
                                borderTopRightRadius: '0'
                            }}
                            title="详细信息"
                            headStyle={{ borderBottom: 'none', fontSize: '14px', fontWeight: '600' }}
                        >
                            <DetailInfo
                                detailInfo={detailInfo}
                                searchId={urlQuery.id}
                                changeMark={changeMark}
                            ></DetailInfo>
                        </Card>
                    </Col>
                    <Col style={{ width: 350, paddingLeft: 0, paddingRight: 0 }} className={styles.detailCard}>
                        <TaskDetailBox
                            title="基本信息"
                            key="基本信息"
                            dataSource={taskDetails.filter(item => !item.hide)}
                            style={{
                                borderBottomRightRadius: '0',
                                borderBottomLeftRadius: '0',
                                borderTopLeftRadius: '0'
                            }}
                            headStyle={{ borderBottom: 'none', fontSize: '14px', color: '#787878' }}
                        />
                        <TaskDetailBox
                            title="时间信息"
                            key="时间信息"
                            dataSource={timeDetails}
                            style={{
                                borderBottomRightRadius: '0',
                                borderBottomLeftRadius: '0',
                                borderTopLeftRadius: '0'
                            }}
                            headStyle={{ borderBottom: 'none', fontSize: '14px', color: '#787878' }}
                        />
                        <TaskDetailBox
                            title="其他信息"
                            key="其他信息"
                            dataSource={otherDetails}
                            style={{
                                borderBottomRightRadius: '0',
                                borderBottomLeftRadius: '0',
                                borderTopLeftRadius: '0'
                            }}
                            headStyle={{ borderBottom: 'none', fontSize: '14px', color: '#787878' }}
                        />
                    </Col>
                </Row>
            </Spin>
        </PageHeaderWrapper>
    );
};

export default ChangeRecDetail;
